<template>
	<view style="padding: 20px 30rpx;">
		<view class="order-info">
			<view><image class="image" src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/home-banner.png" mode="aspectFill"></image></view>
			<view class="content">
				<view class="phone">联系电话：95338</view>
				<view class="ordernum">邮政EMS:27653022562256</view>
			</view>
		</view>
		<view class="order-status">
			<uni-steps :options="list1" :active="active" />
			<view class="destination">
				<text>某某市</text>
				<text>深圳市</text>
			</view>
		</view>
		<view class="delivery">
			<view class="title">物流详情</view>
			<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:1,
				list1: [{
					title: '已发货'
				}, {
					title: '运输中'
				}, {
					title: '派件中'
				}, {
					title: '已签收'
				}],
				list2:[
					{
						title: '订单已签收，期待再次为您服务',
						desc: '2023-05-24  12:00'
					}, {
						title: '到达目的地网点广东深圳公司，快件将很快进行派送',
						desc: '2023-05-24  12:00'
					}, {
						title: '在广东深圳公司进行发出扫描',
						desc: '2023-05-24  12:00'
					}, {
						title: '在分拨中心广东深圳公司进行卸车扫描',
						desc: '2023-05-24  12:00'
					}, {
						title: '在北京市进行下级地点扫描',
						desc: '2023-05-24  12:00'
					}
				]
			};
		}
	}
</script>

<style lang="scss">
page{
	background-color: #ffffff;
}
.order-info{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-flow: row nowrap;
	background-color: #F5F8FB;
	padding: 15px;
	border-radius: 8px;
	
	.image{
		width: 96rpx;
		height: 96rpx;
		border-radius: 8px;
		margin-right: 30rpx;
	}
	.content{
		flex: 1;
		font-size: 28rpx;
		line-height: 22px;
		
		.phone{
			font-weight: bold;
			color: #283241;
		}
		
		.ordernum{
			color: #646A74;
		}
	}
}

.order-status{
	margin-top:15px;
	background-color: #F5F8FB;
	padding: 15px 0;
	border-radius: 8px;
}

.destination{
	padding: 10px 40rpx;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	color: #646A74;
	font-size: 28rpx;
}

.delivery{
	margin-top: 20px;
	
	.title{
		font-size: 32rpx;
		font-weight: bold;
		color: #283241;
		line-height: 24px;
	}
}
/deep/.uni-steps__column-text{
	border: none!important;
}
/deep/.uni-steps__column-title {
	line-height: 14px;
}
</style>
